<template>
    <div>
        <input type="text" v-model="value">
        <button @click="addContent">新增</button>
        <button @click="searchContent">查询</button>
        <ul>
            <li v-for="item in showingList" :key="item.id">
                <!-- 没修改中 -->
                <template v-if="!(editingId === item.id)">
                    <span>{{item.value}}</span>
                    <button @click="editContent(item)">修改</button>
                </template>
                <!-- 修改中 -->
                <template v-else>
                    <input type="text" v-model="editingValue">
                    <button @click="editContentOk(item)">确认</button>
                    <button @click="editContentCancel">取消</button>
                </template>
                <!-- 没修改中
                <span v-if="!(editingId === item.id)">{{item.value}}</span>
                修改中
                <input v-else type="text" v-model="item.value">
                没修改中
                <button v-if="!(editingId === item.id)" @click="editContent(item.id)">修改</button>
                修改中
                <button v-else @click="editContentOk(item.id)">确认</button> -->
                <button @click="deleteContent(item.id)">删除</button>
            </li>
        </ul>
    </div>
</template>
<script>
    let idCounter = 0;
    export default {
        data () {
            return {
                value: '123',
                // 全量数据
                list: [],
                // 正在展示的数据
                showingList: [],
                // 是否正在修改
                editingId: -1,
                editingValue: '',
            };
        },
        methods: {
            addContent () {
                this.list.push({
                    id: idCounter++,
                    value: this.value,
                });
                this.showingList = this.list.concat();
                this.value = '';
            },
            deleteContent (id) {
                // 第一种方法
                // const idx = this.list.findIndex(item => item.id === id);
                // this.list.splice(idx, 1);
                // this.showingList = this.list.concat();
                // 第二种方法
                this.list = this.list.filter(item => item.id !== id);
                this.showingList = this.list.concat();
            },
            searchContent () {
                this.showingList = this.list.filter(item => item.value.includes(this.value));
            },
            // 更新修改状态
            editContent (item) {
                this.editingId = item.id;
                this.editingValue = item.value;
            },
            // 修改确认
            editContentOk (item) {
                // 重置修改状态
                item.value = this.editingValue;
                this.editContentCancel();
            },
            // 取消修改
            editContentCancel () {
                this.editingId = -1;
                this.editingValue = '';
            }
        },
    };
</script>